---
type: tutorial
title: RSS-Feed hinzufügen
description: >-
  Tutorial: Erstelle deinen ersten Astro-Blog —
  Installiere das offizielle Astro-Paket, um einen Feed zu erstellen, den deine Leser abonnieren können
i18nReady: true
---

import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { Steps } from '@astrojs/starlight/components';

<PreCheck>
  - ein Astro-Paket zu installieren, um einen RSS-Feed für deine Website zu erstellen
  - einen Feed zu erstellen, den man abonnieren und mit RSS-Feed-Readern lesen kann
</PreCheck>

## Astros RSS-Paket installieren

Astro hat ein spezielles Paket, mit dem du schnell einen RSS-Feed zu deiner Website hinzufügen kannst. 

Dieses offizielle Paket erstellt ein Nicht-HTML-Dokument mit Infos zu all deinen Blog-Beiträgen, das von **Feed-Readern** wie Feedly, The Old Reader und anderen gelesen werden kann.
Dieses Dokument wird jedes Mal aktualisiert, wenn deine Website neu erstellt wird.

Einzelpersonen können deinen Feed in einem Feed-Reader abonnieren und erhalten eine Benachrichtigung, wenn du einen neuen Blog-Beitrag auf deiner Website veröffentlichst, was es zu einer beliebten Blog-Funktion macht.

<Steps>
1. Beende in deinem Terminal den Astro-Entwicklungsserver (<kbd>Strg + C</kbd>/<kbd>Control + C</kbd>) und führe den folgenden Befehl aus, um das RSS-Paket von Astro zu installieren.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install @astrojs/rss
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add @astrojs/rss
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add @astrojs/rss
      ```
      </Fragment>
    </PackageManagerTabs>

2. Starte den Entwicklungsserver neu, um wieder an deinem Astro-Projekt zu arbeiten.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm run dev
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm run dev
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn run dev
      ```
      </Fragment>
    </PackageManagerTabs>
</Steps>

## Erstelle ein `.xml`-Feed-Dokument

<Steps>
1. Erstelle eine neue Datei namens `rss.xml.js` in `src/pages/`.

2. Kopier den folgenden Code in dieses neue Dokument.
   Passe die Eigenschaften `title` und `description` an und gib bei Bedarf in `customData` eine andere Sprache an:

    ```js title="src/pages/rss.xml.js"
    import rss, { pagesGlobToRssItems } from '@astrojs/rss';

    export async function GET(context) {
      return rss({
        title: 'Astro-Lernender | Blog',
        description: 'Meine Reise beim Lernen von Astro',
        site: context.site,
        items: await pagesGlobToRssItems(import.meta.glob('./**/*.md')),
        customData: `<language>de-de</language>`,
      });
    }
    ```

3. Füge die Eigenschaft `site` zur Astro-Konfiguration mit der einzigartigen Netlify-URL deiner Website hinzu.

    ```js title="astro.config.mjs" ins={4}
    import { defineConfig } from "astro/config";

    export default defineConfig({
      site: "https://example.com"
    });
    ```
    
4. Gehe auf `http://localhost:4321/rss.xml` und schau nach, ob du (unformatierten) Text auf der Seite mit einem `item` für jede deiner `.md`-Dateien sehen kannst.
   Jedes Element sollte Blog-Post-Infos wie `title`, `url` und `description` enthalten.

    :::tip[Zeige deinen RSS-Feed in einem Reader an]
    Lade einen Feed-Reader herunter oder melde dich bei einem Online-Feed-Reader-Dienst an und abonniere deine Website, indem du deine eigene Netlify-URL hinzufügst. Du kannst diesen Link auch mit anderen teilen, damit sie deine Beiträge abonnieren und benachrichtigt werden können, wenn ein neuer Beitrag veröffentlicht wird.
    :::

</Steps>

<Box icon="check-list">

## Checkliste

<Checklist>
- [ ] Ich kann ein Astro-Paket über die Befehlszeile installieren.
- [ ] Ich kann einen RSS-Feed für meine Website erstellen.
</Checklist>
</Box>

### Ressourcen

- [RSS-Elementerstellung in Astro](/de/recipes/rss/#using-glob-imports)
